<!DOCTYPE html>
<html lang="en-US,zh-CN">
<head>
	<meta charset="UTF-8">
	<link href="/crm-core/css/bootstrap_css_5/bootstrap.min.css" type="text/css" rel="stylesheet"/>
	<link href="/crm-core/css/jquery_datetimepicker/jquery.datetimepicker.min.css" type="text/css" rel="stylesheet"/>
	<link href="/crm-core/css/pagination/jquery.bs_pagination.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
	<script type="text/javascript" src="/crm-core/js/bootstrap_js_5/bootstrap.bundle.js"></script>
	<script type="text/javascript" src="/crm-core/js/jquery_datetimepicker/jquery.datetimepicker.full.min.js"></script>
	<script type="text/javascript" src="/crm-core/js/bs_pagination/localization/en.js"></script>
	<script type="text/javascript" src="/crm-core/js/bs_pagination/jquery.bs_pagination.js"></script>

<script type="text/javascript">

	//默认情况下取消和保存按钮是隐藏的
	let cancelAndSaveBtnDefault = true;
	$(function(){
		// 获取前一个页面传递的市场活动对象
		const urlParams = new URLSearchParams(window.location.search);
		const id = urlParams.get('activityId');
		loadRemark(id);

		$("#addNewRemark").click(function (){
			const remark = $("#remark").val();
			if(remark != null && remark !== ''){
				const activityId = $("#activityId").val();
				console.log(remark + "==>" +activityId);
				$.ajax({
					url : "/crm-core/workbench/activity/addNewRemark.do",
					type : "POST",
					dataType : "json",
					data : {
						noteContent : remark,
						activityId : activityId
					},
					success : function (data){
						if(data.code === '1'){
							loadRemark(id);
							$("#remark").val("");
						}else{
							alert(data.message);
						}
					}
				});
			}
		});


		// 隐藏提交按钮
		if(cancelAndSaveBtnDefault){
			//隐藏
			$("#cancelAndSaveBtn").hide("2000");
		}

		$("#remark").focus(function(){
			if(cancelAndSaveBtnDefault){
				//显示
				$("#cancelAndSaveBtn").show("2000");
				cancelAndSaveBtnDefault = false;
			}
		});

		$("#cancelBtn").click(function(){
			//显示
			$("#cancelAndSaveBtn").hide();
			//设置remarkDiv的高度为130px
			$("#remarkDiv").css("height","90px");
			cancelAndSaveBtnDefault = true;
		});

		$(document).on("mouseover", ".remarkDiv", function(){
			$(this).children("#editanddel").show(); // 如果#editanddel是.remarkDiv的同级元素
		});

		$(document).on("mouseout", ".remarkDiv", function(){
			$(this).children("#editanddel").hide();
		});

		// 给所有的删除按钮绑定单击事件
		$("#remarkList").on("click","a[flag='deleteRemark']",function (){
			const remarkId = $(this).attr("remarkId");
			$.ajax({
				url:"removeActivityRemarkById.do",
				data:{
					id:remarkId
				},
				dataType:"json",
				type:"post",
				success:function (data){
					if(data.code === "1"){
						loadRemark(id);
					}else{
						alert("出错了");
					}
				}
			});
		});

		// 给所有的备注编辑按钮绑定单击事件
		$("#remarkList").on("click","a[flag='editRemark']",function (){
			const currentRemarkId = $(this).attr("remarkId");
			const currentRemarkContent = $("#content_"+currentRemarkId).text();
			$("#editRemarkId").val(currentRemarkId);
			$("#editModalRemark").val(currentRemarkContent)
			$("#editRemarkModal").modal("show");
		});

		$("#modifyRemarkSave").click(function (){
			const modifiedRemarkId = $("#editRemarkId").val();
			const ModifiedRemarkContent = $("#editModalRemark").val();
			$.ajax({
				url:"modifyActivityRemarkById.do",
				data:{
					id:modifiedRemarkId,
					noteContent:ModifiedRemarkContent
				},
				dataType:"json",
				type:"post",
				success:function (data){
					if(data.code === "1"){
						$("#editRemarkModal").modal("hide");
						loadRemark(id);
					}else{
						alert("出错了");
					}
				}
			});
		});

	});

	// 加载详情页
	function loadRemark(id){
		$.ajax({
			url:"activityDetailShow.do",
			data:{activityId:id},
			type:"POST",
			dataType:"json",
			success:function (data){
				let htmlStr = "";
				if(data.code==='1'){
					$("#activityName").text(data.others.activity.name);
					$("#activityId").val(data.others.activity.id);
					$("#activityOwner").text(data.others.activity.owner);
					$("#activityCreatedBy").text(data.others.activity.createBy);
					$("#activityStartDate").text(data.others.activity.startDate);
					$("#activityEndDate").text(data.others.activity.endDate);
					$("#activityCost").text(data.others.activity.cost);
					$("#activityDescription").text(data.others.activity.description);
					$("#activityModifiedBy").text(data.others.activity.editBy);
					$("#activityModifiedDate").text(data.others.activity.editTime)
					data.others.activitiesRemarks.forEach(function (item,index) {
						htmlStr += "<div class=\"card\">";
						htmlStr += "<div class=\"card-body\">";
						htmlStr += "<div class=\"remarkDiv col\"><div style=\"display: inline-block;\">";
						htmlStr += "<img title=\"" + item.createBy + "\" src=\"../../image/user-thumbnail.png\" style=\"width: 30px; height:30px;\" alt=\"头像\">";
						htmlStr += "&nbsp;<span class=\"fs-6 text-wrap\" id=\"content_"+item.id+"\">" + item.noteContent + "</span></div><br/>";
						htmlStr += "<input type=\"hidden\" id=\"remarkId\" value=\"" + item.id + "\">";
						if (item.editFlag === null) {
							htmlStr += "<span class=\"text-body-secondary fs-6 fw-light\">于<small>" + item.createTime + "由" + item.createBy + "创建</small></span>";
						} else {
							htmlStr += "<span class=\"text-body-secondary fs-6 fw-light\">于<small>" + item.editTime + "由" + item.editBy + "修改</small></span>";
						}
						htmlStr += "<div id=\"editanddel\" style=\"display: none;\">";
						htmlStr += "<a class=\"myHref icon-link icon-link-hover link-secondary\" flag=\"editRemark\" remarkId=\""+item.id+"\" href=\"javascript:void(0);\" style=\"--bs-icon-link-transform: translate3d(0, -.125rem, 0);\">";
						htmlStr += "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-pencil-square\" viewBox=\"0 0 16 16\">";
						htmlStr += "<path d=\"M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z\"/>";
						htmlStr += "<path fill-rule=\"evenodd\" d=\"M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z\"/>";
						htmlStr += "</svg></a>&nbsp;&nbsp;&nbsp;&nbsp;";
						htmlStr += "<a class=\"myHref icon-link icon-link-hover link-secondary\" flag=\"deleteRemark\" remarkId=\""+item.id+"\" href=\"javascript:void(0);\" style=\"--bs-icon-link-transform: translate3d(0, -.125rem, 0);\">";
						htmlStr += "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-trash-fill\" viewBox=\"0 0 16 16\">";
						htmlStr += "<path d=\"M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0\"/>";
						htmlStr += "</svg></a>"
						htmlStr += "</div></div></div></div></div>"
					});
					$("#remarkList").html(htmlStr);
				} else {
					alert("备注加载失败，请稍后再试！")
				}
			}
		});
	}

</script>
	<title>市场活动详情</title>
</head>
<body>
<div class="container-fluid position-fixed" id="activityContainer">
	<div class="row">
		<div class="col-7 border-end">
			<div class="container-fluid">
				<div class="row mt-1 align-items-center">
					<div class="col d-inline-flex align-self-center">
						<a class="btn icon-link icon-link-hover" onclick="window.history.back();" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
								<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
							</svg>
						</a>
						<h5 id="activityName">市场活动名称</h5>
						<input type="hidden" id="activityId">
					</div>
				</div>
				<hr/>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">所有者：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityOwner"></span>
					</div>
				</div>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">创建者：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityCreatedBy"></span>
					</div>
				</div>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">开始时间：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityStartDate"></span>
					</div>
				</div>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">结束时间：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityEndDate"></span>
					</div>
				</div>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">成本：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityCost"></span>
					</div>
				</div>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">修改者：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityModifiedBy"></span>
					</div>
				</div>
				<div class="row mt-4 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">修改时间：</span>
					</div>
					<div class="col-7 g-1 border-bottom">
						<span class="p-5 text-center" id="activityModifiedDate"></span>
					</div>
				</div>
				<div class="row mt-4 mb-3 align-items-center">
					<div class="col-4 g-1">
						<span class="p-5 text-center">详情描述：</span>
					</div>
					<div class="col-7 g-1">
						<span class="p-5 text-center text-wrap" id="activityDescription"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="col-5">
			<div class="container-fluid mt-2" id="remarkContainer">
				<div class="row">
					<div class="col-4">
						<!-- 备注 -->
						<div class="col">
							<div class="page-header">
								<h5>备注</h5>
							</div>
						</div>
					</div>
				</div>
				<div class="row mt-2">
					<div class="col"  id="remarkList" style="overflow-y: auto;height: 530px">
					</div>
				</div>
				<div class="row mt-2">
					<div class="card border border-0">
						<div class="card-body">
							<div id="remarkDiv">
								<label for="remark" hidden="hidden"></label>
								<textarea id="remark" class="form-control focus-ring" placeholder="添加备注..."
										  style="padding-top: 2px"></textarea>
								<div id="cancelAndSaveBtn" class="position-absolute mt-2" style="padding-right: 15px">
									<button id="cancelBtn" class="btn btn-sm btn-default">取消</button>
									<button id="addNewRemark" class="btn btn-sm btn-primary">保存</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- 修改市场活动备注的模态窗口 -->
	<div class="modal fade" id="editRemarkModal" role="dialog">
		<input type="hidden" id="editRemarkId">
		<div class="modal-dialog modal-md modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<div class="col-11">
						<h5 class="modal-title text-muted">修改市场活动备注</h5>
					</div>
					<div class="col-1">
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
				</div>
				<div class="modal-body">
					<div class="container-fluid">
						<div class="row">
							<div class="col-12 align-items-center">
								<label for="editModalRemark" hidden="hidden"></label>
									<textarea class="form-control focus-ring start-50" id="editModalRemark"></textarea>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
					<button id="modifyRemarkSave" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>

</body>
</html>